{% extends 'base.html' %}{% load i18n %}
{% block add_js %}
	<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key={{ MAPS_API_KEY }}" type="text/javascript"></script>
	<script src="/media/js/jquery-1.2.1.js" type="text/javascript"></script>
	<script src="/media/js/jquery.jmap2.js" type="text/javascript"></script>
{% endblock add_js %}
{% block title %}map{% endblock title %}
{% block main_content %}
    <div id="gmap"></div>
	<div id="gdirections" style="width: 500px; height: 500px"></div>
	<script type="text/javascript">
		(function($){
			$('#gmap').jmap({mapShowOverview:true}).createMarkerManager().createGeoCache();
			//autosizing
			zoomlevel = $.jmap.GMap2.getBoundsZoomLevel(new GLatLngBounds(new GLatLng({{b.lat_min}},{{b.lng_min}}),new GLatLng({{b.lat_max}},{{b.lng_max}})))
			$.jmap.GMap2.setCenter(new GLatLng(({{b.lat_max}} + {{b.lat_min}})/2,({{b.lng_max}} + {{b.lng_min}})/2),zoomlevel)
			{% for event in events %}
				$('#gmap').addMarker({
					pointLat:{{ event.lat }},
					pointLng:{{ event.lng }},
					isDraggable:false,
					pointHTML:'<h3>{{ event.place }}</h3><p>{{ event.street }}, {{ event.city }}, {{ event.country }}</p>'
				})
			{% endfor %}
		})(jQuery);
	</script>	
{% endblock main_content %}
